<template>
  <div class="reception-accident">
    <div class="header">
      <h2>事故记录管理</h2>
      <p>查看和管理养老院内发生的事故记录</p>
    </div>

    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <el-card shadow="never">
        <el-form :model="searchForm" inline>
          <el-form-item label="老人姓名">
            <el-input
              v-model="searchForm.elderName"
              placeholder="请输入老人姓名"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="事故类型">
            <el-select
              v-model="searchForm.accidentType"
              placeholder="请选择事故类型"
              clearable
              style="width: 200px"
            >
              <el-option label="跌倒" value="跌倒" />
              <el-option label="烫伤" value="烫伤" />
              <el-option label="迷路" value="迷路" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item label="发生时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <el-card shadow="never">
        <el-table
          :data="tableData"
          v-loading="loading"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="accidentId" label="事故ID" width="80" />
          <el-table-column prop="elderName" label="老人姓名" width="120" />
          <el-table-column prop="accidentType" label="事故类型" width="100">
            <template #default="{ row }">
              <el-tag :type="getAccidentTypeTag(row.accidentType)">
                {{ row.accidentType }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="accidentTime" label="发生时间" width="180">
            <template #default="{ row }">
              {{ formatDateTime(row.accidentTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="description" label="事故描述" min-width="200" show-overflow-tooltip />
          <el-table-column prop="severity" label="严重程度" width="100">
            <template #default="{ row }">
              <el-tag :type="getSeverityTag(row.severity)">
                {{ row.severity || '未知' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="caregiverName" label="负责护工" width="120" />
          <el-table-column prop="status" label="处理状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTag(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button
                type="primary"
                link
                @click="handleViewDetail(row)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="事故记录详情"
      width="800px"
      destroy-on-close
    >
      <div v-if="currentRecord" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="事故ID">
            {{ currentRecord.accidentId }}
          </el-descriptions-item>
          <el-descriptions-item label="老人姓名">
            {{ currentRecord.elderName }}
          </el-descriptions-item>
          <el-descriptions-item label="事故类型">
            <el-tag :type="getAccidentTypeTag(currentRecord.accidentType)">
              {{ currentRecord.accidentType }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="严重程度">
            <el-tag :type="getSeverityTag(currentRecord.severity)">
              {{ currentRecord.severity || '未知' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="发生时间" :span="2">
            {{ formatDateTime(currentRecord.accidentTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="发生地点" :span="2">
            {{ currentRecord.location || '未记录' }}
          </el-descriptions-item>
          <el-descriptions-item label="事故描述" :span="2">
            {{ currentRecord.description }}
          </el-descriptions-item>
          <el-descriptions-item label="处理措施" :span="2">
            {{ currentRecord.handlingMeasures || '暂无处理措施' }}
          </el-descriptions-item>
          <el-descriptions-item label="目击信息" :span="2">
            {{ currentRecord.witnessInfo || '无目击信息' }}
          </el-descriptions-item>
          <el-descriptions-item label="后续跟进" :span="2">
            {{ currentRecord.followUp || '暂无后续跟进' }}
          </el-descriptions-item>
          <el-descriptions-item label="负责护工">
            {{ currentRecord.caregiverName }}
          </el-descriptions-item>
          <el-descriptions-item label="处理状态">
            <el-tag :type="getStatusTag(currentRecord.status)">
              {{ getStatusText(currentRecord.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDateTime(currentRecord.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatDateTime(currentRecord.updateTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const tableData = ref([])
const detailDialogVisible = ref(false)
const currentRecord = ref(null)

// 搜索表单
const searchForm = reactive({
  elderName: '',
  accidentType: '',
  dateRange: []
})

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 模拟数据
const mockData = [
  {
    accidentId: 1,
    elderName: '张大爷',
    accidentType: '跌倒',
    accidentTime: '2024-10-02 14:30:00',
    description: '在卫生间门口不慎滑倒',
    severity: '轻微',
    location: '卫生间门口',
    handlingMeasures: '立即扶起检查，轻微擦伤，消毒处理',
    witnessInfo: '护工李护工目击',
    followUp: '继续观察，无异常',
    caregiverName: '张护工',
    status: 'completed',
    createTime: '2024-10-02 14:35:00',
    updateTime: '2024-10-02 14:35:00'
  },
  {
    accidentId: 2,
    elderName: '李大妈',
    accidentType: '烫伤',
    accidentTime: '2024-10-01 11:00:00',
    description: '喝热水时不小心烫到嘴唇',
    severity: '轻微',
    location: '餐厅',
    handlingMeasures: '冷敷处理，涂抹烫伤膏',
    witnessInfo: '无目击者',
    followUp: '已恢复，无大碍',
    caregiverName: '王护工',
    status: 'completed',
    createTime: '2024-10-01 11:05:00',
    updateTime: '2024-10-01 11:05:00'
  },
  {
    accidentId: 3,
    elderName: '王爷爷',
    accidentType: '迷路',
    accidentTime: '2024-09-30 16:00:00',
    description: '在院内散步时找不到回房间的路',
    severity: '一般',
    location: '院内花园',
    handlingMeasures: '护工及时找到并送回房间',
    witnessInfo: '其他老人反映',
    followUp: '加强看护，避免再次走失',
    caregiverName: '赵护工',
    status: 'completed',
    createTime: '2024-09-30 16:10:00',
    updateTime: '2024-09-30 16:10:00'
  },
  {
    accidentId: 4,
    elderName: '刘大爷',
    accidentType: '其他',
    accidentTime: '2024-09-29 09:00:00',
    description: '情绪不稳定，与室友发生争执',
    severity: '一般',
    location: '房间内',
    handlingMeasures: '安抚情绪，分开调解',
    witnessInfo: '室友反映',
    followUp: '情绪已稳定，继续观察',
    caregiverName: '钱护工',
    status: 'pending',
    createTime: '2024-09-29 09:15:00',
    updateTime: '2024-09-29 09:15:00'
  }
]

// 方法
const getAccidentTypeTag = (type) => {
  const typeMap = {
    '跌倒': 'warning',
    '烫伤': 'danger',
    '迷路': 'info',
    '其他': ''
  }
  return typeMap[type] || ''
}

const getSeverityTag = (severity) => {
  const severityMap = {
    '轻微': 'success',
    '一般': 'warning',
    '严重': 'danger',
    '未知': 'info'
  }
  return severityMap[severity] || 'info'
}

const getStatusTag = (status) => {
  const statusMap = {
    'pending': 'warning',
    'processing': 'primary',
    'completed': 'success',
    'cancelled': 'info'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'processing': '处理中',
    'completed': '已完成',
    'cancelled': '已取消'
  }
  return statusMap[status] || '未知'
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  return new Date(dateTime).toLocaleString('zh-CN')
}

const handleSearch = () => {
  pagination.currentPage = 1
  loadTableData()
}

const handleReset = () => {
  Object.assign(searchForm, {
    elderName: '',
    accidentType: '',
    dateRange: []
  })
  pagination.currentPage = 1
  loadTableData()
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  loadTableData()
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
  loadTableData()
}

const handleViewDetail = (record) => {
  currentRecord.value = record
  detailDialogVisible.value = true
}

const loadTableData = () => {
  loading.value = true
  
  // 模拟API调用延迟
  setTimeout(() => {
    // 模拟搜索过滤
    let filteredData = [...mockData]
    
    if (searchForm.elderName) {
      filteredData = filteredData.filter(item => 
        item.elderName.includes(searchForm.elderName)
      )
    }
    
    if (searchForm.accidentType) {
      filteredData = filteredData.filter(item => 
        item.accidentType === searchForm.accidentType
      )
    }
    
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      const [startDate, endDate] = searchForm.dateRange
      filteredData = filteredData.filter(item => {
        const accidentDate = item.accidentTime.split(' ')[0]
        return accidentDate >= startDate && accidentDate <= endDate
      })
    }
    
    // 模拟分页
    const startIndex = (pagination.currentPage - 1) * pagination.pageSize
    const endIndex = startIndex + pagination.pageSize
    
    tableData.value = filteredData.slice(startIndex, endIndex)
    pagination.total = filteredData.length
    loading.value = false
  }, 500)
}

// 生命周期
onMounted(() => {
  loadTableData()
})
</script>

<style scoped>
.reception-accident {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

.header p {
  margin: 5px 0 0 0;
  color: #909399;
  font-size: 14px;
}

.search-section {
  margin-bottom: 20px;
}

.table-section {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.detail-content {
  max-height: 500px;
  overflow-y: auto;
}

:deep(.el-descriptions) {
  margin-top: 10px;
}

:deep(.el-descriptions__label) {
  font-weight: bold;
  width: 100px;
}
</style>
